<template>
	<view class="content">
		<!-- 选项卡商品区域 -->
		<view class="tabs">
			<u-sticky bgColor="#fff">
				<template>
					<u-tabs :list="list" :scrollable="false" 
						lineColor="#d81e06" :activeStyle="{color: '#d81e06'}" 
						:inactiveStyle="{color:'black'}" itemStyle="height:44px;width:25%;"
						@change="getOrders" :current="currentIndex">
					</u-tabs>
				</template>
			</u-sticky>
		</view>
		<view class="order" v-for="item in Num" :key="item.id">
			<view class="shop">
				<view class="head">
					<!-- <u-icon size="20" name="home"></u-icon>
					<text>{{item.store}}</text>
					<u-icon name="arrow-right"></u-icon> -->
				</view>
				<text v-for="f in item.goodlist" class="sta">{{f.deal}}</text>
			</view>
			<view class="shop2" v-for="k in item.goodlist">
				<view class="img">
					<image :src="k.goodImg"></image>
				</view>
				<view class="text">
					<view class="val">
						<view class="val-1">
							{{k.goodName}}
						</view>
						<view class="val-2">
							<text>￥{{k.goodPrice}}</text>
							<view class="num">x{{k.num}}</view>
						</view>
					</view>
					<view class="type">{{k.val}}</view>
					<view class="time">{{k.deliveryTime}}</view>
				</view>
			</view>
			<view class="sum">
				<view>共{{item.nums}}件商品 合计: <text>￥{{item.sum}}</text></view>
			</view>
			<view class="select">
				<view>
					<u-icon name="more-dot-fill"></u-icon>
				</view>
				<view>
					<u-button :plain="true" :hairline="true" shape="circle">查看物流</u-button>
				</view>
				<view>
					<u-button :plain="true" :hairline="true" shape="circle">卖了换钱</u-button>
				</view>
				<view>
					<u-button type="warning" :plain="true" :hairline="true" shape="circle">评价</u-button>
				</view>
			</view>
		</view>
		<u-empty v-show="Num.length==0" mode="order"
				icon="http://cdn.uviewui.com/uview/empty/order.png">
		</u-empty>
	</view>
</template>

<script>
import {apiOrders} from '../../api/mock'
	export default {
		data() {
			return {
				orders : [],
				currentIndex:0,
				list : [
					{name:'全部', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
					{name:'待付款', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
					{name:'待发货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
					{name:'待收货', goods: null, num:1, y:0, curPageLen:0, hasNext:true},
					{name:'待评价', goods: null, num:1, y:0, curPageLen:0, hasNext:true}
				],
			}
		},
		onLoad(e) {
			if(Object.keys(e).length ===0){
				this.getOrders({index:0});
			}else{
				setTimeout(()=>{
					this.getOrders(e);
				},1000)
			}
		},
		computed:{
			Num(){
				this.orders.forEach((item)=>{
					item.nums =0;// 共多少件商品,
					item.sum =0;// 合计多少钱
					console.log(item.goodlist);
					item.goodlist.forEach((k)=>{
						item.nums +=k.num;
						item.sum +=k.goodPrice * k.num;
					})
				})
				return this.orders;
			}
		},
		methods: {
			getOrders(e){
				console.log(e);
				this.currentIndex =e.index;
				console.log(this.currentIndex);
				let tabname =this.list[e.index].name;
				console.log(tabname);
				apiOrders(tabname).then((res)=>{
					uni.hideLoading();
					this.orders = res;
					console.log(this.orders);
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style>
.content{
	width: 100%;
	background-color: #f8f8f8;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.tabs{
	width: 100%;
	overflow: hidden;
	background-color: white;
}
.order{
	width: 96%;
	margin: 14px auto;
	border-radius: 8px;
	background-color: white;
	padding-bottom: 10px;
}
.order .shop{
	width: 100%;
	padding-top: 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order .shop .sta{
	width: 16%;
	font-size: 14px;
	font-weight: 550;
	color: #f5ad41;
}
.order .shop .head{
	width: 70%;
	display: flex;
	align-items: center;
}
.order .shop .head text{
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
.order .shop .head .u-icon:nth-last-child(1){
	margin-left: 4px;
}
.order .shop2{
	width: 98%;
	margin: 8px auto;
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
}
.order .shop2 .img{
	width: 100px;
	height: 100px;
}
.order .shop2 .img image{
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.order .shop2 .text{
	width: 70%;
}
.order .shop2 .text .val{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order .shop2 .text .val .val-1{
	width: 74%;
	font-size: 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order .shop2 .text .val .val-2{
	width: 25%;
	margin-top: 6px;
	font-size: 13px;
}
.order .shop2 .text .val .val-2 .num{
	margin-left: 60%;
	font-size: 12px;
	color: #b6b8ba;
}
.order .shop2 .text .type{
	width: 90%;
	margin-top: 8px;
	font-size: 13px;
	color: #9ea0a1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order .shop2 .text .time{
	margin-top: 8px;
	font-size: 13px;
	color: #e9d82d;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order .sum{
	width: 100%;
	font-size: 13px;
	margin-left: 55%;
}
.order .sum text{
	font-size: 15px;
}
.order .select{
	width: 100%;
	margin-top: 20px;
	padding-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.order .select .u-button{
	width: 80px;
	height: 25px;
	font-size: 12px;
}
</style>
